<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
</head>
<body>
    <%@ include file="/static/web/jsp/top.jsp"%>

    <!-- 轮播 -->
    <div class="flexslider" id="focusController" >
        <ul class="slides">
            <li style="background:url(${path}/static/web/images/slide_01.png) 50% 0 no-repeat;" :style="{background:getBackStyle(item.img)}" v-for="item in focus" @click="jump(item)"></li>
        </ul>
    </div>

    <!-- 艺术资讯 -->
    <div class="art_news" id="newsController" v-cloak>
        <div class="container">
            <div class="news_head">
                <img class="head_pic" src="${path}/static/web/images/art_news_head.png">
                <a class="news_more" href="${path}/web/index/news">更多</a>
            </div>
            <div class="news_box">
                <ul>
                    <li class="news_item" v-for="item in list" @click="jump(item)">
                        <a href="javascript:;" target="_blank">
                            <div class="item_head">
                                <div class="item_date">{{item.date}}</div>
                                <div class="item_side">
                                    <h2>{{item.title}}</h2>
                                    <p>{{item.time}}</p>
                                </div>
                            </div>
                            <p class="item_desc">{{item.info}}</p>
                            <img class="item_pic" init-src="${path}/static/web/images/pic_01.jpg" v-sy-img="item.img" v-if="item.img"/>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <img class="left_side" src="${path}/static/web/images/left_side.png">
        <img class="right_side" src="${path}/static/web/images/right_side.png"> -->
    </div>

    <!-- 排行榜 -->
    <div class="ranks container" id="sortController" v-cloak>
        <div class="module_head"><img src="${path}/static/web/images/ranks_head.png"/><a class="head_more news_more" href="${path}/web/index/rank">完整排行</a></div>
        <div id="focus">
            <ul>
                <li v-for="(arr,index) in sort">
                    <div class="rank_group">
                        <a class="rank_item" :href="'${path}/web/art/'+arr[0].id" target="_blank">
                            <i class="icon rank_fox icon_first" v-if="index == 0"></i>
                            <img class="rank_01" init-src="${path}/static/web/images/rank_01.png" v-sy-img="arr[0].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[0].goodsName}}</p>
                                    <p class="rank_info">{{arr[0].goodsUploadUserName}}&nbsp;&nbsp;{{arr[0].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="rank_group" v-if="arr.length > 1">
                        <a class="rank_item" :href="'${path}/web/art/'+arr[1].id" target="_blank">
                            <i class="icon rank_fox icon_second" v-if="index == 0"></i>
                            <img class="rank_02" init-src="${path}/static/web/images/rank_02.png" v-sy-img="arr[1].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[1].goodsName}}</p>
                                    <p class="rank_info">{{arr[1].goodsUploadUserName}}&nbsp;&nbsp;{{arr[1].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                        <a class="rank_item" :href="'${path}/web/art/'+arr[2].id" target="_blank" v-if="arr.length > 2">
                            <i class="icon rank_fox icon_third" v-if="index == 0"></i>
                            <img class="rank_03" init-src="${path}/static/web/images/rank_03.png" v-sy-img="arr[2].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[2].goodsName}}</p>
                                    <p class="rank_info">{{arr[2].goodsUploadUserName}}&nbsp;&nbsp;{{arr[2].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="rank_group" v-if="arr.length > 3">
                        <a class="rank_item" :href="'${path}/web/art/'+arr[3].id" target="_blank">
                            <img class="rank_04" init-src="${path}/static/web/images/rank_04.png" v-sy-img="arr[3].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[3].goodsName}}</p>
                                    <p class="rank_info">{{arr[3].goodsUploadUserName}}&nbsp;&nbsp;{{arr[3].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                        <a class="rank_item" :href="'${path}/web/art/'+arr[4].id" target="_blank" v-if="arr.length > 4">
                            <img class="rank_05" init-src="${path}/static/web/images/rank_05.png" v-sy-img="arr[4].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[4].goodsName}}</p>
                                    <p class="rank_info">{{arr[4].goodsUploadUserName}}&nbsp;&nbsp;{{arr[4].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="rank_group" v-if="arr.length > 5">
                        <a class="rank_item" :href="'${path}/web/art/'+arr[5].id" target="_blank">
                            <img class="rank_06" init-src="${path}/static/web/images/rank_06.png" v-sy-img="arr[5].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[5].goodsName}}</p>
                                    <p class="rank_info">{{arr[5].goodsUploadUserName}}&nbsp;&nbsp;{{arr[5].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                        <a class="rank_item" :href="'${path}/web/art/'+arr[6].id" target="_blank" v-if="arr.length > 6">
                            <img class="rank_07" init-src="${path}/static/web/images/rank_07.png" v-sy-img="arr[6].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[6].goodsName}}</p>
                                    <p class="rank_info">{{arr[6].goodsUploadUserName}}&nbsp;&nbsp;{{arr[6].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                        <a class="rank_item" :href="'${path}/web/art/'+arr[7].id" target="_blank" v-if="arr.length > 7">
                            <img class="rank_08" init-src="${path}/static/web/images/rank_08.png" v-sy-img="arr[7].goodsImg"/>
                            <div class="rank_model">
                                <div class="model_content">
                                    <p class="rank_title">{{arr[7].goodsName}}</p>
                                    <p class="rank_info">{{arr[7].goodsUploadUserName}}&nbsp;&nbsp;{{arr[7].goodsTime}}</p>
                                </div>
                            </div>
                        </a>
                    </div>

                </li>
            </ul>
        </div>
    </div>

    <!-- 每日艺术品 -->
    <div class="recommend container" id="artController" v-cloak >
        <div class="module_head"><img src="${path}/static/web/images/date_head.png"/></div>
        <div class="date_recommend">
            <p>{{art.goodsInfo}}</p>
            <a :href="'${path}/web/index/single/'+art.id" target="_blank">
                <img class="recommend_pic" init-src="${path}/static/web/images/recommend_pic.png" v-sy-img="art.goodsImg"/>
            </a>
        </div>
    </div>

    <!-- 今日热拍 -->
    <div class="recommend container" id="hotController" v-cloak>
        <div class="module_head"><img src="${path}/static/web/images/hot_head.png"/></div>
        <h4 class="hot_date">{{now}} 第{{nowNum}}期拍卖</h4>
        <%--<div class="hot_box">--%>
            <%--<ul id="hot">--%>
                <%--<li class="hot_item" v-for="item in hot" @click="jump(item)" >--%>
                    <%--<a href="javascript:;" target="_blank">--%>
                        <%--<div class="hot_pic"><img init-src="${path}/static/web/images/hot_01.jpg" v-sy-img="item.goodsImg"/></div>--%>
                        <%--<div class="hot_content">--%>
                            <%--<h3 class="title">{{item.goodsName}}</h3>--%>
                            <%--<div class="desc">--%>
                                <%--<p>{{item.artName}}</p>--%>
                                <%--<p v-if="item.goodsTime">{{item.goodsTime}}年</p>--%>
                            <%--</div>--%>
                            <%--<p class="price">--%>
                                <%--当前价：<span class="red">￥{{item.nowPrice}}</span>--%>
                                <%--&lt;%&ndash;<span class="period">第{{nowNum}}期</span>&ndash;%&gt;--%>
                            <%--</p>--%>
                            <%--<p class="down_time" v-show="item.time">结拍倒计时： {{item.time}}</p>--%>
                        <%--</div>--%>
                    <%--</a>--%>
                <%--</li>--%>
            <%--</ul>--%>
        <%--</div>--%>
        <div class="waterfull clearfloat" id="waterfull">
            <ul>
                <li class="item" v-for="(item,index) in hot" @click="jump(item)" :style="{opacity:0}">
                    <a href="#" :href="'${path}/web/auction/'+item.goodsId" class="a-img">
                        <img src="${path}/static/web/images/waterfull_01.png"  v-sy-img="item.goodsImg" alt=""> <!-- :src="getImg(index)" -->
                    </a>
                    <div class="content">
                        <div class="item_head">
                            <h3 class="title">{{item.goodsName}}</h3>
                            <div class="label">
                                <i class="icon icon_nation" v-if="item.conNum"></i>
                                <i class="icon icon_author" v-if="item.ftype == 1"></i>
                                <i class="icon icon_link" v-if="item.ethTradeNo"></i>
                            </div>
                        </div>
                        <p class="price">
                            当前价：<span class="red">￥{{item.nowPrice}}</span>
                        </p>
                        <div class="info">
                            <span class="author">作者：{{item.artName}}</span>
                            <span class="year" v-if="item.goodsTime">{{item.goodsTime}}年</span>
                        </div>
                    </div>
                    <div class="time" v-show="item.time">结拍倒计时：{{item.time}}</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 为什么选择艺基因 -->
    <div class="model_container">
        <div class="why_head"><img src="${path}/static/web/images/why.png" /></div>
        <div class="why_model">
            <ul>
                <!-- 更改内容开始 -->
                <li class="why_item">
                    <div class="item_pic"><img src="${path}/static/web/images/zhen@2x.png"></div>
                    <div class="why_content">
                        <h2>保证真品</h2>
                        <p>区块链溯源,国家编码认证</p>
                    </div>
                </li>
                <li class="why_item">
                    <div class="item_pic"><img src="${path}/static/web/images/jing@2x.png"></div>
                    <div class="why_content">
                        <h2>精选作品</h2>
                        <p>全国十大美院师生作品</p>
                    </div>
                </li>
                <li class="why_item">
                    <div class="item_pic"><img src="${path}/static/web/images/hui@2x.png"></div>
                    <div class="why_content">
                        <h2>优惠价格</h2>
                        <p>低交易佣金,会员专属折扣</p>
                    </div>
                </li>
                <li class="why_item">
                    <div class="item_pic"><img src="${path}/static/web/images/she@2x.png"></div>
                    <div class="why_content">
                        <h2>精彩社区</h2>
                        <p>与全世界的艺术爱好者交流拍卖心得</p>
                    </div>
                </li>
                <!-- 更改内容结束 -->

            </ul>
        </div>
    </div>

    <!-- 客服 -->

    <%@ include file="/static/web/jsp/footer.jsp"%>

</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/slide.js"></script>
<%--<script src="${path}/static/web/js/carousel.js"></script>--%>
<script src="${path}/static/web/js/jquery.masonry.min.js"></script>
<script src="${path}/static/web/js/jQeasing.js"></script>
<script src="${path}/static/web/js/art.js"></script>
<script src="${path}/static/web/js/yjy.js"></script>
<script src="${path}/static/web/js/biz/index.js"></script>
<script>
    //轮播
//    $(document).ready(function(){
//        $('.flexslider').flexslider({
//            directionNav: true,
//            pauseOnAction: false
//        });
//    });



</script>

</html>